<template>
  <!-- 个人中心 -->
  <view class="myself">
    <view class="myself-wrapper">
      <view
        class="myself-content myself-card"
        style="margin-top: 20rpx; background: #00c9ae"
      >
        <view class="myself-head" data-url="" @click="handleClickRouter">
          <view class="avatar">
            <image
              class="headImg"
              :src="
                personInfo.avateor
                  ? personInfo.avateor
                  : baseImgUrl + 'queryFace.png'
              "
            ></image>
          </view>
          <view class="avatarName">
            <view class="areaName">
              {{ personInfo.realName || personInfo.userName || "请登录" }}
            </view>
            <view class="areaPhone">
              {{ personInfo.mobile || "" }}
            </view>
          </view>
        </view>
      </view>

      <view class="myself-content myself-card" style="margin-top: 2vh">
        <view
          class="person-con"
          v-for="item in menuList"
          :key="item.id"
          :data-url="item.url"
          @click="personHandle($event, item)"
        >
          <view>
            <image
              :src="item.iconName"
              style="margin-bottom: -4rpx; width: 32rpx; height: 32rpx"
            ></image>
            <text style="padding-left: 2vh">{{ item.name }}</text>
          </view>
          <view>
            <u-icon name="arrow-right" style="color: #9e9e9e"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <custom-tab-bar :tabBarIndex="tabBarIndex" ref="tabRef" />
  </view>
</template>

<script>
import { logout } from "@/api/api.js";
import { whetherLogin, Toast, handleClickRouter } from "@/utils/util.js";

export default {
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      tabBarIndex: 3,
      token: "",
      personInfo: {},
      menuList: [
        {
          id: 1,
          iconName: `${this.$baseImgUrl}self_icon1.png`,
          name: "个人信息",
          url: "/selfInfo/personalDetails/personalDetails",
        },
        {
          id: 2,
          iconName: `${this.$baseImgUrl}self_icon2.png`,
          name: "我的餐厅",
          url: "/selfInfo/myRestaurant/myRestaurant",
        },
        {
          id: 3,
          iconName: `${this.$baseImgUrl}self_icon3.png`,
          name: "清洗合同",
          url: "/selfInfo/rinsePact/rinsePact",
        },
        {
          id: 4,
          iconName: `${this.$baseImgUrl}self_icon4.png`,
          name: "第三方检测报告",
          url: "/selfInfo/testReport/testReport",
        },

        {
          id: 5,
          iconName: `${this.$baseImgUrl}self_icon5.png`,
          name: "退出登录",
          url: "",
        },
      ],
      num: 0,
    };
  },
  onShow() {
    this.num += 1;
    this.personInfo = {};
    this.token = uni.getStorageSync("X-MINI-TOKEN");

    if (!this.token) {
      if (this.num <= 1) {
        this.menuList.pop();
      }
      return;
    }

    this.getList();
  },
  methods: {
    handleClickRouter,
    userListHandle(e) {
      let url = e.currentTarget.dataset.url;
      uni.navigateTo({
        url,
      });
    },
    personHandle(e, item) {
      if (!this.token) {
        whetherLogin();
        return;
      }

      if (item.id == 5) {
        uni.showModal({
          title: "提示",
          content: "是否退出登录？",
          success(res) {
            if (res.confirm) {
              logout().then((res) => {
                if (res.code == 200) {
                  Toast("退出登录成功");
                  setTimeout(() => {
                    uni.clearStorageSync();
                    uni.reLaunch({
                      url: "/pages/beforeLogin/beforeLogin",
                    });
                  }, 1000);
                }
              });
            }
          },
        });
      }

      let url = e.currentTarget.dataset.url;
      uni.navigateTo({
        url,
      });
    },
    getList() {
      this.personInfo = uni.getStorageSync("user");
    },
  },
};
</script>

<style lang="scss" scoped>
.myself {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .myself-wrapper {
    flex: 1;
    position: relative;
    background-color: #f4f5f7;

    .myself-content {
      position: relative;
      margin: 0 auto;
      padding: 2vh 4vh 4vh;
      border-radius: 16rpx;
      width: 710rpx;

      .myself-head {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #fff;
        font-weight: 500;

        .avatarName {
          flex: 1;
          .areaName {
            position: relative;
            margin-bottom: 1vh;
            font-size: 36rpx;
          }

          .areaPhone {
            font-size: 26rpx;
          }
        }
      }
    }

    .myself-card {
      background: #fff;
      font-size: 30rpx;

      .person-con {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.7vh 0;
        border-bottom: 1px solid #f3f3f3;

        .u-iconfont {
          margin-right: 1vh;
        }
      }
    }
  }

  .popup-status {
    padding: 0 5vh;
    height: 100%;

    .popup-select {
      display: flex;
      justify-content: space-between;
      padding: 3vh 0;
      border-bottom: 1px solid #f1f1f1;

      .popup-title {
        font-size: 30rpx;
        font-weight: bold;
      }
    }

    .popup-radio {
      color: #7c7c7c;
      padding: 2vh 0;
      border-bottom: 1px solid #f1f1f1;
    }
  }

  .avatar {
    margin-right: 1.5vh;
    border-radius: 130rpx;
    overflow: hidden;
    width: 130rpx;
    height: 130rpx;
    .headImg {
      border-radius: 50%;
      overflow: hidden;
      width: 120rpx;
      height: 120rpx;
    }
  }
}
</style>
